<template>
	<view class="page">
		<view class="" v-if="type == 2">
			<view class="cover">
				<image :src="cover.img" mode="aspectFill" @click="previewCover"></image>
			</view>
			<view class="title">
				<input type="text" disabled placeholder="请输入表单标题" v-model="title" maxlength="50">
			</view>
			<view class="des" v-if="des.length">
				<textarea type="text" disabled placeholder="请输入表单描述" v-model="des" maxlength="100"></textarea>
			</view>
			<u-gap height="20" bgColor="#efefef"></u-gap>
			<view class="form">
				<active-form ref="activeForm" v-model="formData" :isEdit="true" num @tapDevice="tapDevice" @tapCode="tapCode"></active-form>
			</view>
			<view class="edit-btn" v-if="!isDone">
				<u-button type="primary" color="#2979ff" text="提交" @click="confirm"></u-button>
			</view>
			<view class="edit-btn" style="display: flex;" v-else>
				<u-button type="primary" color="#f5222d" text="删除" @click="del"></u-button>
				<u-button type="primary" style="margin-left: 20rpx;" color="#2979ff" text="保存" @click="update"></u-button>
			</view>
		</view>
		<view class="" v-else-if="type == 1">
			<view class="cover">
				<image :src="cover.img" mode="aspectFill"></image>
			</view>
			<view class="title">
				<input type="text" disabled placeholder="请输入表单标题" v-model="title" maxlength="50">
			</view>
			<view class="des" v-if="des.length">
				<textarea type="text" disabled placeholder="请输入表单描述" v-model="des" maxlength="100"></textarea>
			</view>
			<u-gap height="20" bgColor="#efefef"></u-gap>
			<view class="form">
				<active-form v-model="formData" :isEdit="false" num></active-form>
			</view>
		</view>
		<u-popup :show="show" @close="show = false" @open="show = true">
			<view style="max-height: 650rpx;overflow-y: scroll;">
				<view class="list" :class="item.Id == formdataid ? 'self' : ''" v-for="(item,index) in forms" :key="item.Id" @click="perview(item)">
					<view class="list__icon center">
						<image src="@/static/theme/default/community/form1.png" mode="aspectFill"></image>
					</view>
					<view class="list__content">
						<view class="list__content--title ellipsis" :style="item.CreatePxid == pxid ? 'color: #fa8c16' : ''">{{item.CreateUser}}</view>
						<view class="list__content--des ellipsis">{{item.UpdateTime}}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import _custom from '@/common/_custom.js'
	import _data from '@/common/_data.js'
	import {getScanCode} from '@/common/custom_util.js'
	import ActiveForm from "@/components/active-form/active-form";
	
	export default {
		 components: {
			ActiveForm
		},
		data() {
			return {
				static_img: _data.data('static_img'),
				obsusername: _data.localData('name'),
				pxid: _data.localData('userid'),
				data: {},
				self: {},
				cover: {
					img: 'http://221.226.178.122:1884/homepage/AppImage/smartform/cover.png',
					path: '/homepage/AppImage/smartform/cover.png'
				},
				title: '',
				des: '',
				formData: [],
				device: {},
				forms: [],
				type: -1,//1：填写，2：预览他人
				formdataid: '',
				isDone: false,
				show: false
			}
		},
		onLoad(options) {
			let that = this;
			let data = {};
			try {
				options.data ? data = JSON.parse(options.data) : '';
				options.type ? this.type = options.type : '';
				if(!Object.keys(data).length) return
				this.data = data;
				this.getSmartFormDataInBusiness();
				if(this.type == 2) {
					that.formData = that.data.FormJson;
				}
				this.title = this.data.FormTitle;
				this.des = this.data.FormDesc;
				this.cover = {
					img: this.static_img + '/' + this.data.CoverImage,
					path: this.data.CoverImage
				};
			} catch {}
		},
		onNavigationBarButtonTap() {
			this.show = true;
		},
		methods: {
			/**
			 * 获取业务关联的表单填写详情
			 */
			getSmartFormDataInBusiness() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getSmartFormDataInBusiness',
					code: 1,
					apiparam: {
						formid: this.data.FormId,
						businesscode: "Subject",
						businessid: this.data.id,
					},
					success(res) {
						res.forEach(item => {
							item.cover = that.static_img + '/' + item.CoverImage;
							try {
								let json = item.DataJson.replace(/%22/g,'"');
								item.DataJson = JSON.parse(json);
							} catch{}
							if(item.CreatePxid == that.pxid) {
								that.isDone = true;
								that.formData = item.DataJson;
							}
						})
						if(!res.length) return
						if(that.type == 1 && res[res.length - 1].CreatePxid == that.pxid) {
							that.type = 2;
						} else if (that.type == 1 && res[res.length - 1].CreatePxid != that.pxid) {
							that.formData = res[res.length - 1].DataJson;
						}
						that.formdataid = res[res.length - 1].Id;
						uni.setNavigationBarTitle({
							title: res[res.length - 1].CreateUser
						});
						that.forms = res;
					},
					fail() {
						uni.showToast({
							title: "获取数据失败",
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 填写表单数据
			 */
			addSmartFormData() {
				let that = this;
				let devicecode = '';
				this.formData.forEach(item => {
					if(item.type == 'device') devicecode = item.deviceCode;
				})
				let form = JSON.stringify(this.formData);
				form = form.replace(/\[\{/g,"[[{");
				form = form.replace(/}]/g,"}]]");
				_custom.getDataJava({
					apiname: 'addSmartFormData',
					code: 3,
					apiparam: {
						"createuser": this.obsusername,
						"createpxid": this.pxid,
						"businesscode": "Subject", //业务编码,帖子里的就是Subject固定，其他业务另起名
						"businessid": this.data.id, //对应业务编码各自的业务Id，帖子就传帖子Id
						"formid": this.data.FormId, //表单Id
						"typename": this.data.TypeName,
						"devicecode": devicecode, //设备位号，表单有设备表项时使用
						"datajson": form //数据Json
					},
					success(res) {
						uni.showToast({
							title: "填写成功",
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						},300)
					},
					fail() {
						uni.showToast({
							title: "填写失败",
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 删除表单填写数据
			 */
			flagDeleteSmartFormData() {
				let that = this;
				_custom.getDataJava({
					apiname: 'flagDeleteSmartFormData',
					code: 2,
					apiparam: {
						"formdataid": this.formdataid,
					},
					success(res) {
						uni.showToast({
							title: "删除成功",
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						},300)
					},
					fail() {
						uni.showToast({
							title: "删除失败",
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 更新表单填写数据
			 */
			updateSmartFormData() {
				let that = this;
				let devicecode = '';
				this.formData.forEach(item => {
					if(item.type == 'device') devicecode = item.deviceCode;
				})
				let form = JSON.stringify(this.formData)
				form = form.replace(/\[\{/g,"[[{");
				form = form.replace(/}]/g,"}]]");
				_custom.getDataJava({
					apiname: 'updateSmartFormData',
					code: 2,
					apiparam: {
						formdataid: this.formdataid,
						datajson: form,
						devicecode: devicecode
					},
					success(res) {
						uni.showToast({
							title: "修改成功",
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateBack()
						},300)
					},
					fail() {
						uni.showToast({
							title: "修改失败",
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 获取设备详情
			 */
			getDeviceDetail() {
				let that = this;
				_custom.getDataJava({
					apiname: 'getDeviceDetail',
					apiparam: {
						device: this.device.device,
						devicecode: this.device.devicecode
					},
					success(res) {
						if(!res.length) return
						let data = res[0];
						that.formData.forEach(item => {
							if(item.type == 'device') {
								that.$set(item,'deviceName',data.name + '('+data.aname+')');
								this.$set(item,'deviceCode',data.aname);
							}
						})
					},
					fail() {
						uni.showToast({
							title: "获取失败",
							icon: 'none'
						})
					}
				})
			},
			tapDevice() {
				uni.navigateTo({
					url: '../equipment/index?param=2'
				})
			},
			getDevice(v) {
				this.device = v;
				this.formData.forEach(item => {
					if(item.type == 'device') {
						this.$set(item,'deviceName',v.name + '('+v.aname+')');
						this.$set(item,'deviceCode',v.devicecode);
					}
				})
			},
			tapCode() {
				getScanCode().then(data => {
					this.device = data;
					this.getDeviceDetail();
				});
				
			},
			confirm() {
				let that = this;
				this.$refs.activeForm.$vervify();
				uni.showModal({
					title: '提示',
					content: '确认要保存吗？',
					success(res) {
						if(res.confirm) {
							that.addSmartFormData();
						}
					}
				})
			},
			del() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认要删除吗？',
					success(res) {
						if(res.confirm) {
							that.flagDeleteSmartFormData();
						}
					}
				})
			},
			update() {
				let that = this;
				this.$refs.activeForm.$vervify();
				uni.showModal({
					title: '提示',
					content: '确认要修改吗？',
					success(res) {
						if(res.confirm) {
							that.updateSmartFormData();
						}
					}
				})
			},
			perview(v) {
				this.type = v.CreatePxid == this.pxid ? 2 : 1;
				this.formData = v.DataJson;
				this.formdataid = v.Id;
				uni.setNavigationBarTitle({
					title: v.CreateUser
				});
				this.show = false;
			},
			previewCover() {
				uni.previewImage({
					urls: [this.cover.img],
					current: 0
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	image {
		width: 100%;
		height: 100%;
	}
	
	.page {
		background-color: #fff;
		min-height: 100vh;
	}
	
	.cover {
		height: 400rpx;
		position: relative;
		
		image {
			width: 100%;
			height: 100%;
		}
		
		&-mask {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 3;
			background-color: rgba(0, 0, 0, .4);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			
			image {
				width: 80rpx;
				height: 80rpx;
			}
			
			&-text {
				font-size: 27rpx;
				color: #fff;
			}
		}
	}
	
	.title {
		padding: 20rpx;
		height: 100rpx;
		
		input {
			font-size: 35rpx;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #eee;
		}
	}
	
	.des {
		padding: 10rpx 20rpx;
		height: 100rpx;
		box-sizing: border-box;
		
		textarea {
			font-size: 27rpx;
			width: 100%;
			height: 100%;
		}
	}
	
	.form {
		padding-bottom: 400rpx;
	}
	
	.add {
		padding: 20rpx;
		
		&-btn {
			height: 100rpx;
			border: 1rpx dashed #aaa;
			color: #aaa;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 20rpx;
			
			&__icon {
				font-size: 60rpx;
				font-weight: 100;
			}
			
			&__text {
				font-size: 35rpx;
				margin-left: 20rpx;
			}
		}
	}
	
	.menu {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 9;
		width: 700rpx;
		height: 160rpx;
		background-color: #fff;
		box-shadow: 0 0 20rpx 1rpx rgba(0, 0, 0, .2);
		border-radius: 20rpx;
		display: flex;
		justify-content: space-around;
		
		&__item {
			width: 160rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			&--icon {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				
				image {
					width: 80%;
					height: 80%;
				}
			}
			
			&--text {
				text-align: center;
				font-size: 33rpx;
				color: #aaa;
			}
		}
	}
	
	
	.manage-pop {
		
		&__content {
			background-color: #fff;
			display: flex;
			padding: 20rpx;
			
			&--list {
				
				&-icon {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					background-color: #f0f0f0;
					
					image {
						width: 50%;
						height: 50%;
					}
				}
				
				&-text {
					text-align: center;
				}
			}
		}
		
		&__cancel {
			height: 100rpx;
			font-size: 30rpx;
			font-weight: bold;
			background-color: #f5f5f5;
			text-align: center;
			line-height: 100rpx;
		}
	}
	
	.list {
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 20rpx;
		flex-shrink: 0;
		background-color: #fff;
		display: flex;
		align-items: center;
		border-bottom: 1rpx solid #eee;
		
		&__icon {
			width: 100rpx;
			height: 100%;
			
			image {
				width: 60rpx;
				height: 60rpx;
			}
		}
		
		&__content {
			flex: 1;
			padding: 0 20rpx;
			
			&--title {
				font-size: 30rpx;
			}
			
			&--des {
				font-size: 26rpx;
				color: #aaa;
			}
		}
	}
	
	.self {
		background-color: #e6f4ff;
	}
	
	.edit-btn {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		z-index: 9;
		background-color: #fff;
		padding: 20rpx;
		box-shadow: 0 -3rpx 20rpx 1rpx rgba(0, 0, 0, .1);
	}
</style>
